<template>
	<Tree :data="folderTree" :render="renderFunc"></Tree>
</template>

<script>
	import clonedeep from 'clonedeep';
	import {expandSpecifiedFolder, putFileInFolder, transferFolderToTree} from "../../lib/util";

	export default {
  	name: "folder-tree",
  	data() {
		return {
			folderTree: [],
		  	curRenameId: "",
			curRenameContent: "",
		  	renderFunc: (h, { root, node, data }) => {
				const dropList = data.type === "folder" ? this.folderDrop : this.fileDrop;
				const dropdownRender = dropList.map(item => {
					return <dropdownItem name={item.name}>{item.title}</dropdownItem>
				});
				const isRenaming = this.curRenameId === `${data.type || "file"}_${data.id}`;
				return (
			  		<div class="tree-item">
						{data.type === "folder" ? <icon type="ios-folder" color="#2d8cf0" style="margin-right:10px;"/> :  "" }
						{
							isRenaming
							? <span>
								<i-input value={data.title} on-input={this.handleInput} class="tree-rename-input"></i-input>
								<i-button size="small" type="text" on-click={this.saveRename.bind(this, data)}><icon type="md-checkmark" /></i-button>
								<i-button size="small" type="text"><icon type="md-close"/></i-button>
							</span>
							: <span> {data.title} </span>
						}
						{
							dropList && !isRenaming
							? <dropdown placement="right-start" on-on-click={this.handleDropdownClick.bind(this, data)}>
								<i-button size="small" type="text" class="tree-item-button">
									<icon type="md-more" size={12}/>
								</i-button>
								<dropdownMenu slot="list">{dropdownRender}</dropdownMenu>
							</dropdown>
						 	: ''
						}
			  		</div>
				)
		  	}
		};
  	},
	props: {
		folderList: {
			type: Array,
			default: () => []
		},
		fileList: {
			type: Array,
			default: () => []
		},
		folderDrop: Array,
		fileDrop: Array,
		beforeDelete: Function
	},
	watch: {
		folderList() {
			this.transData();
		},
		fileList() {
			this.transData();
		}
	},
	mounted() {
		this.transData();
	},
	methods: {
		transData() {
			this.folderTree = transferFolderToTree(
				putFileInFolder(this.folderList, this.fileList)
			);
		},
		isFolder(type) {
			return type === 'folder';
		},
		handleDelete(data) {
			const isFolder = this.isFolder(data.type);
			const folderId = data.folder_id;
			let updateListName = isFolder ? 'folderList' : 'fileList';
			let list = isFolder ? clonedeep(this.folderList) : clonedeep(this.fileList);
			// 过滤不删除的数据
			list = list.filter(item => item.id !== data.id);
			this.$emit(`update:${updateListName}`, list);
			this.$nextTick(() => expandSpecifiedFolder(this.folderTree, folderId));
		},
		handleDropdownClick(data, name) {
			if (name === "rename") {
				this.curRenameId = `${data.type || "file"}_${data.id}`;
			}else if (name === 'delete') {
				this.$Modal.confirm({
					title:'提示',
					content: `确定要删除${this.isFolder(data.type) ? '文件夹' : '文件'}< ${data.title} >吗？`,
					onOk: () => {
						this.beforeDelete ? this.beforeDelete().then(() => {
							this.handleDelete(data);
						}).catch(() => {
							this.$Message.error('删除失败')
						}) : this.handleDelete(data);
					}
				});
			}
		},
		handleInput(value) {
			this.curRenameContent = value;
		},
		updateList(list, id) {
			let i = -1;
			let len = list.length;
			while (++i < len) {
				let item = list[i];
				if (item.id === id) {
					item.name = this.curRenameContent;
					// 把修改后的文件名替换进去
					list.splice(i, 1, item);
					break;
				}
			}
			return list;
		},
		saveRename(data) {
			const id = data.id;
			const type = data.type;
			if (type === 'folder') {
				const list = this.updateList(clonedeep(this.folderList), id);
				this.$emit('update:folderList', list);
			} else {
				const list = this.updateList(clonedeep(this.fileList), id);
				this.$emit('update:fileList', list);
			}
			this.curRenameId = '';
		}
	}
};
</script>

<style lang="less">
	.tree-item {
		display: inline-block;
		width: ~"calc(100% - 50px)";
		height: 30px;
		line-height: 30px;

		& > .ivu-dropdown {
			float: right;
		}

		ul.ivu-dropdown-menu {
			padding-left: 0;
		}

		li.ivu-dropdown-item {
			margin: 0;
			padding: 7px 16px;
		}

		.tree-rename-input {
			width: ~"calc(100% - 80px)";
		}
	}
</style>
